<template>
	<view v-if="pageShow" class="mainpadding">
		<view class="flexbetween mainpadding ffffff radius">
			<view class="changdi">
				<!-- <image src="../static/image/system/changdi.png" mode=""></image> -->
				<image :src="dataAll.userzbfapply.logo_text" mode=""></image>
			</view>
			<view class="" style="width: 83%;">
				<view class="titletext xiaohei nofonweight">{{dataAll.userzbfapply.name}}</view>
				<view class="ershil xiaohui nofonweight xiankuan margin_top1">{{dataAll.userzbfapply.des}}
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<view class="flexbetween">
				<view class="shilitu">
					<image :src="dataAll.cgscdata.image_text" mode=""></image>
				</view>
				<view class="flexcolumnbet" style="width: 65%;height:160rpx">
					<view class="titletext xiaohei fonweight yhxk">{{dataAll.cgscdata.name}}</view>
					<view class="flexleft margin_top2">
						<view class="sanshier xiaohong fonweight margin_right1">¥ {{dataAll.cgscdata.price}}</view>
						<view class="titletext xiaohui zhonghuax">¥ {{dataAll.cgscdata.price}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding ffffff margin_top" v-if="dataAll.coupon_list && dataAll.coupon_list.length">
			<view class="sanshier xiaohei fonweight">优惠</view>
			<view class="flexbetween margin_top" @click="yhqShow=true">
				<view class="ershiba xiaohui nofonweight">优惠券</view>
				<view class="flexright">
					<view class="ershiba xiaohui nofonweight">{{coupon_name?coupon_name:'选择优惠券'}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<view class="gudingdb">
			<view class="mainpadding ffffff flexbetween">
				<view class="">
					<view class="strongtext xiaohei nofonweight">需支付：
						<text class="xiaohong ershiba fonweight"
							v-if="dataAll.pay_info">￥{{dataAll.pay_info.pay_price}}</text>
						<text class="xiaohong ershiba fonweight" v-if="!dataAll.pay_info">￥0.00</text>
					</view>
					<view class="xiaohuang strongtext nofonweight" v-if="dataAll.pay_info && dataAll.pay_info.zk_price">
						会员优惠{{dataAll.pay_info.zk_price}}元</view>
					<view class="xiaohuang strongtext nofonweight" v-if="dataAll.pay_info">
						（优惠券抵扣{{dataAll.pay_info.coupon_price}}元）</view>
					<view class="xiaohuang strongtext nofonweight" v-if="!dataAll.pay_info">（优惠券抵扣0元）</view>
				</view>
				<view class="xiaobtnty" @click="tzyyxx">立即预定</view>
			</view>
		</view>
		<u-popup :show="yhqShow" @close="yhqShow=false">
			<view class="mainpadding_top fonweight flexcenter">优惠券</view>
			<view class="mainpadding" style="background-color: #f9f9f9;">
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class=" margin_top" v-for="item in dataAll.coupon_list" :key="item.id"
						@click="selectrole(item)">
						<view class="flexleft yxzbox" v-show="item.id==coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaobai nofonweight">￥
									<text class="bigtext xiaobai fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaobai nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaobai nofonweight">{{item.name}}</view>
								<view class="strongtext xiaobai nofonweight margin_top1">有效截止日期：{{item.end_time_text}}
								</view>
							</view>
						</view>
						<view class="flexleft wexbxo" v-if="item.id!=coupon_id">
							<view class="nerbox youbk">
								<view class="smalltext xiaolv nofonweight">￥
									<text class="bigtext xiaolv fonweight">{{item.price}}</text>
								</view>
								<view class="strongtext xiaohei nofonweight margin_top1">
									{{Number(item.mj_price)==0?"无使用门槛":"满"+item.mj_price}}
								</view>
							</view>
							<view class="nerbox">
								<view class="sanshier xiaohei nofonweight">{{item.name}}</view>
								<view class="strongtext xiaohei nofonweight margin_top1">有效截止日期：{{item.end_time_text}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				user_zbfapply_listid:"",
				pageShow:false,
				yhqShow:false,
				coupon_id:"",
				coupon_name:"",
				dataAll:{}
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.user_zbfapply_listid = options.user_zbfapply_listid
			this.init()
		},
		methods: {
			init(){
				httpRequest.request('/api/Cgscordercl/cgScSure', 'POST', {
					user_zbfapply_id: this.user_zbfapply_listid,
					cg_sc_id: this.listid,
					coupon_id:this.coupon_id
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			},
			selectrole(item) {
				this.coupon_id = item.id
				this.coupon_name = item.name
				this.init()
			},
			tzyyxx() {
				let data = {
					cg_sc_id: this.listid,
					coupon_id: this.coupon_id,
					user_zbfapply_id: this.user_zbfapply_listid,
				}
				let url = '/api/Cgscordercl/addCgScOrder'
				httpRequest.request(url, 'POST', data, false, false, true).then(res => {
					uni.redirectTo({
						url: '/pages_homepage/zhifu?type=5&id=' + res.data.id + "&price=" + res.data
							.pay_price
					})
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shilitu {
		width: 200rpx;
		height: 160rpx;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
	.changdi {
		width: 100rpx;
		height: 100rpx;
	
		image {
			border-radius: 50%;
			width: 100%;
			height: 100%;
		}
	}
</style>
<style lang="scss" scoped>
	.nerbox {
		padding: 38rpx 31rpx;
	}

	.wexbxo {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.youbk {
		border-right: 2rpx solid #F5F5F5;
	}

	.yxzbox {
		background: #1BA95B;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	
</style>
